<template>
	<view class="container">
    <view>
      <view class="title-1">其他音频测试：</view>
      <view class="list">
        <audio-cc :title="musicList[1].title" :src="musicList[1].src" :alonePlay="alonePlay"></audio-cc>
      </view>
    </view>

    <view>
      <view class="title-1">列表播放器：</view>
      <view class="list">
        <audio-cc v-on:ended="ended" v-on:currentChange="currentChange" :title="music.title" :src="music.src" :alonePlay="alonePlay" :autoplay="autoplay" :firstCurrent="firstCurrent" :playbackRate="playbackRate"></audio-cc>
      </view>
    </view>

    <view>
      <view class="title-1">音频列表：</view>
      <view class="list">
        <button :class="{'item': true, 'active': index===selectedMusicIndex}" v-for="(music, index) in musicList" :key="index" @click="selectedMusicIndex=index">{{ music.title }}</button>
      </view>
    </view>

    <view>
      <view class="title-1">功能列表：</view>
      <view class="list">
        <button @click="selectedMusicIndex < 0 ? selectedMusicIndex = musicList.length - 1: selectedMusicIndex--">上一首</button>
        <button @click="selectedMusicIndex === (musicList.length - 1) ? selectedMusicIndex = 0: selectedMusicIndex++">下一首</button>
        <button @click="autoplayNext=!autoplayNext">自动播放下一首:{{ autoplayNext ? '启用': '禁止' }}</button>
        <button @click="alonePlay=!alonePlay">是否支持多音频同事播放:{{ !alonePlay ? '启用': '禁止' }}</button>
      </view>
    </view>

    <view>
      <view class="title-1">倍速设置：</view>
      <view class="list">
        <view class="item"><input v-model="playbackRate" /></view>
      </view>
    </view>

    <view>
      <view class="title-1">首次快进（秒）：</view>
      <view class="list">
        <view class="item"><input v-model="firstCurrent" /></view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        selectedMusicIndex: 0,
        musicList: [
          {
            src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
            title: '测试音频',
          },
          {
            src: 'http://m8.music.126.net/20230711144927/b6ba888bce87177fbd9068f6f5e319b6/ymusic/555b/0008/0f08/b1621de5ce7b69b62ef88bc56d6c5c7d.mp3',
            title: '你',
          },
          {
            src: 'http://m701.music.126.net/20230711144828/b9d53e338eef9300fa1d59fa8870394e/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14096431911/f66a/74d2/d8f4/480f7bf07d7e7897d35898c1c05421ad.mp3',
            title: '晚风',
          },
          {
            src: 'https://mpge.5nd.com/2022/2022-6-15/3277704/1.mp3',
            title: '有一个姑娘',
          },
        ],
        firstCurrent: 4.1,
        autoplay: true,
        autoplayNext: true,
        playbackRate: 1.0,
        alonePlay: false
			}
		},
    computed:{
      music(){
        return this.musicList[this.selectedMusicIndex]
      }
    },
		methods: {
      ended(){
        if (this.autoplayNext) {
          this.selectedMusicIndex === (this.musicList.length - 1) ? this.selectedMusicIndex = 0: this.selectedMusicIndex++
        }
      },
      currentChange(current){
        console.info('进度记录', current)
      }
		}
	}
</script>

<style lang="scss">
page{
  background: white;
}

.container {
  padding: 40rpx;
  font-size: 28rpx;
  line-height: 24rpx;
}

.title-1{
  padding: 20rpx 0;
  font-size: 28rpx;
  line-height: 24px;
}

.list{
  .item{
    padding: 20rpx 20rpx;
    font-size: 28rpx;
    background: #cecece;
    margin-bottom: 2rpx;
  }

  .active{
    background: green;
    color: white;
  }
}
</style>
